<template>
	<view :style="{height:PhoneInfo.windowHeight + 'px',width:PhoneInfo.windowWidth + 'px'}">
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<u-toast ref="uToast"></u-toast>
		<view class="gross">
			<view class="eqinfo">
				<view class="eqname">{{equipment.name}}</view>
				<view class="eqpng">
					<u-swiper :list="equipment.picUrl" @click="swiperpng"></u-swiper>
				</view>
				<view class="bjinfo">
					<view class="swipertitle">报警详情</view>
					<view class="swiperneiron">
						<view class="swiperview">
							<view class="text ydone">一级报警:</view>
							<view class="number one">{{equipment.totalUnusual}}</view>
							<view class="text">次</view>
						</view>
						<view class="swiperview">
							<view class="text ydtwo">二级报警:</view>
							<view class="number two">{{equipment.totalWarning}}</view>
							<view class="text">次</view>
						</view>
						<view class="swiperview">
							<view class="text ydthree">三级报警:</view>
							<view class="number three">{{equipment.totalHighRisk}}</view>
							<view class="text">次</view>
						</view>
					</view>
				</view>
			</view>
			<view class="eqzt">
				<view class="dqzthead">
					<view class="dapzttitle">当前状态:
						<text
							:class="equipment.healthStatus==2?'one':equipment.healthStatus==3?'two':equipment.healthStatus==4?'three':'hei'">{{equipment.healthStatusName}}</text>
					</view>
					<view class="dapzttext">
						最后检测于:{{equipment.collectedTime==''?'暂无':equipment.collectedTime}}
					</view>
				</view>
			</view>
			<view class="editcishu">
				<view style="width: 90%; line-height: 25px;" @click="editequipment">修改连续报警次数阈值</view>
				<view style="width: 10%;">
					<u-icon name="question-circle" color="#606266" size="25" @click="editabshow=true"></u-icon>
					<u-modal :show="editabshow" title="连续报警次数阈值" content='连续报警次数阈值：当测点某一指标的连续报警次数达到或超过此阈值时，系统将产生报警记录。'
						@confirm='editabshow=false'></u-modal>
				</view>
			</view>
		</view>
		<uni-collapse :accordion='true'>
			<view class="pointli" v-for="(item, index) in pointList" :key="item.pointRealId"
				:class="item.healthStatus==2?'one':item.healthStatus==3?'two':item.healthStatus==4?'three': 'hei'"
				@longpress="longpress(item)">
				<uni-collapse-item titleBorder="none">
					<template v-slot:title>
						<uni-list :border='false'>
							<uni-list-item :clickable="true" @click="gotoRecord(item)">
								<template v-slot:header>
									<view class="slotbo">
										<view class="slottitle">{{item.name}}
										</view>
										<view class="slottext" v-if="item.deviceMac!==''&&item.deviceMac!==null">
											SN:{{item.deviceMac}}{{item.deviceName==""?'':'('+item.deviceName+')'}}
										</view>
										<view class="slottext" v-else>未绑定传感器</view>
										<view class="slottext">
											最后检测于:{{item.collectedTime==""?'暂无':item.collectedTime}}
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<view v-if="item.recentFeatureDatas.length!==0" class="xia">
						<view class="xiaindex">
							<view class="biaoti">结构噪声</view>
							<view class="xiaindexlist">
								<view v-for="(constructionItem,number) in item.characteristic.construction"
									:key="constructionItem.code"
									:class="['xiaview',constructionItem.healthStatus==4?'gaobao':constructionItem.healthStatus==3?'baojing':constructionItem.healthStatus==2?'yvjing':'zhengchang']"
									@click="gototrend(constructionItem,item)">
									<view class="xianame">{{constructionItem.name}}</view>
									<view>
										{{constructionItem.value}}{{constructionItem.unit=='ma'?'%':constructionItem.unit}}
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.characteristic.air.length!==0" class="xiaindex">
							<view class="biaoti">空气噪声</view>
							<view class="xiaindexlist">
								<view v-for="(airItem,number) in item.characteristic.air" :key="airItem.code"
									:class="['xiaview',airItem.healthStatus==4?'gaobao':airItem.healthStatus==3?'baojing':airItem.healthStatus==2?'yvjing':'zhengchang']"
									@click="gototrend(airItem,item)">
									<view class="xianame">{{airItem.name}}</view>
									<view>
										{{airItem.value}}{{airItem.unit=='ma'?'%':airItem.unit}}
									</view>
								</view>
							</view>
						</view>
						<view class="xiaindex">
							<view class="biaoti">振动烈度</view>
							<view class="xiaindexlist">
								<view v-for="(vibrationItem,number) in item.characteristic.vibration"
									:key="vibrationItem.code"
									:class="['xiaview',vibrationItem.healthStatus==4?'gaobao':vibrationItem.healthStatus==3?'baojing':vibrationItem.healthStatus==2?'yvjing':'zhengchang']"
									@click="gototrend(vibrationItem,item)">
									<view class="xianame">{{vibrationItem.name}}</view>
									<view>
										{{vibrationItem.value}}{{vibrationItem.unit=='ma'?'%':vibrationItem.unit}}
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.characteristic.basics.length!==0" class="xiaindex">
							<view class="biaoti">基础信息</view>
							<view class="xiaindexlist">
								<view v-for="(basicsItem,number) in item.characteristic.basics" :key="basicsItem.code"
									:class="['xiaview',basicsItem.healthStatus==4?'gaobao':basicsItem.healthStatus==3?'baojing':basicsItem.healthStatus==2?'yvjing':'zhengchang']"
									@click="gototrend(basicsItem,item)">
									<view class="xianame">{{basicsItem.name}}</view>
									<view>
										{{basicsItem.value}}{{basicsItem.unit=='ma'?'%':basicsItem.unit}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="zanwushujv">暂无数据</view>
				</uni-collapse-item>
			</view>
		</uni-collapse>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" nomore-text=' '
			bgColor="#efeff4"></u-loadmore>
		<u-action-sheet :actions="polist" :description='pointdescription' :title="pointtitle" round="10"
			:closeOnClickOverlay="true" @close="pointshow = false" overlayOpacity='0.5' @select="selectClick"
			:show="pointshow"></u-action-sheet>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				PhoneInfo: '',
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "设备详情",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				equipment: {
					name: '',
					collectedTime: '',
				},
				userinfo: '',
				editabshow: false,
				pointList: [], //测点列表
				pageSize: 10, //每页显示个数
				pageIndex: 1, //当前第几页
				count: 0, //请求的数量
				loadStatus: 'loadmore',
				loadingText: '加载中...',
				loadmoreText: '上拉加载更多',
				pointtitle: '',
				pointdescription: '',
				polist: [],
				pointshow: false,
			};
		},
		onLoad(parameter) {
			this.PhoneInfo = this.$utils.GetPhoneInfo();
			this.userinfo = uni.getStorageSync('userinfo');
			this.getequipmentinfo(parameter.equipmentRealId);
		},
		methods: {
			//返回
			onLeftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			//修改报警次数阈值
			editequipment() {
				uni.navigateTo({
					url: '/pages/equipmentManage/editEquipment?equipmentRealId=' + this.equipment.equipmentRealId +
						'&entrust=' + this.equipment.assignFlag
				})
			},
			//获取设备信息
			getequipmentinfo(eqid) {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookEquipmentInfo.replace(
						"{userRealId}", this.userinfo.userRealId).replace("{equimentRealId}",
						eqid),
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.equipment = res.data.data;
							if (this.equipment.picUrl.length !== 0 && this.equipment.picUrl[0] !== '') {
								var arr = []
								for (let val of this.equipment.picUrl) {
									arr.push(getApp().globalData.serverAddress + val)
								}
								this.equipment.picUrl = arr
							} else {
								this.equipment.picUrl[0] = '/static/img/NoPictures.png'
							}
							this.getPointList();
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//获取测点列表
			getPointList() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookPointList.replace("{userRealId}",
							this.userinfo.userRealId)
						.replace("{equipmentRealId}", this.equipment.equipmentRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.count = res.data.count;
							this.pointList = res.data.data;
							for (let item of this.pointList) {
								item.characteristic = {
									construction: [], //结构
									air: [], //空气
									vibration: [], //振动
									basics: [], //基础
								};
								for (let value of item.recentFeatureDatas) {
									if (value.code == 'VSX' || value.code == 'VSY' || value.code == 'VSZ') {
										item.characteristic.vibration.push(value);
									} else if (value.code == 'AUN' || value.code == 'ADB' || value.code ==
										'AFRE' || value.code == 'APEAK' || value.code == 'PDB' || value.code ==
										'AWDB') {
										item.characteristic.construction.push(value);
									} else if (value.code == 'AUNT' || value.code == 'ADBT' || value.code ==
										'PDBT' || value.code == 'AWDBT' || value.code == 'AFRET' || value
										.code == 'APEAKT') {
										item.characteristic.air.push(value);
									} else {
										//判断如果是温度的话
										// if (value.code == 'TEMP') {
										// 	//判断如果温度大于150
										// 	if (value.value >= 150) {
										// 		//将数值改为/  单位为空
										// 		value.value = "/";
										// 		value.unit = '';
										// 	}
										// }
										item.characteristic.basics.push(value);
									}
								}
							}
							if (this.count < this.pageSize) {
								this.loadStatus = "nomore";
							} else {
								this.loadStatus = 'loadmore';
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail(res) {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//跳转到趋势图页面
			gototrend(value, po) {
				if (value.code == 'XAN' || value.code == 'YAN' || value.code ==
					'ZAN') {
					var pointTrend = {
						pointRealId: po.pointRealId,
						equipmentRealId: this.equipment.equipmentRealId,
						nametitle: this.equipment.name + '-' + po.name,
						entrust: this.equipment.assignFlag,
					}
					this.$store.commit('alterpointTrend', pointTrend);
					uni.navigateTo({
						url: '/pages/equipment/pointTrend?id=41'
					})
				} else {
					var pointTrend = {
						pointRealId: po.pointRealId,
						equipmentRealId: this.equipment.equipmentRealId,
						nametitle: this.equipment.name + '-' + po.name,
						entrust: this.equipment.assignFlag,
						indexcode: value.code,
					}
					this.$store.commit('alterpointTrend', pointTrend);
					uni.navigateTo({
						url: '/pages/equipment/pointTrend?id=81'
					})
				}
			},
			//跳转到记录列表
			gotoRecord(value) {
				let content = {
					pointRealId: value.pointRealId,
					equipmentRealId: this.equipment.equipmentRealId,
					name: this.equipment.name + '-' + value.name,
					entrust: this.equipment.assignFlag,
					number: 0,
				}
				let data = JSON.stringify(content);
				uni.navigateTo({
					url: `/pages/equipment/recordList?content=${encodeURIComponent(data)}`
				})
			},
			//点击轮播图图片,进行预览
			swiperpng(index) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.equipment.picUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//点击选项
			selectClick(value) {
				if (value.id == 0) { //编辑测点信息
					let parameterinfo = {
						pointRealId: value.pointid,
						equipmentRealId: this.equipment.equipmentRealId,
						entrust: this.equipment.assignFlag,
					}
					let parameterinfodata = JSON.stringify(parameterinfo);
					uni.navigateTo({
						url: `/pages/equipmentManage/editPoint?content=${encodeURIComponent(parameterinfodata)}`
					})
				} else if (value.id == 1) { //查看传感器详情
					uni.navigateTo({
						url: '/pages/sensor/sensor?macCode=' + value.snid
					})
				} else { //绑定传感器
					uni.navigateTo({
						url: '/pages/sensor/addSensor?pointRealId=' + value.pointid +
							'&equipmentRealId=' + this.equipment.equipmentRealId
					})
				}
			},
			//长按设备列表
			longpress(value) {
				this.pointshow = true;
				this.pointtitle = value.name;
				this.pointdescription = value.description;
				if (value.deviceMac !== '' && value.deviceMac !== null) {
					this.polist = [{
						id: 0,
						pointid: value.pointRealId,
						name: '编辑测点信息',
						color: '#303133',
						fontSize: '16'
					}, {
						id: 1,
						snid: value.deviceMac,
						name: '查看传感器详情',
						color: '#303133',
						fontSize: '16'
					}]
				} else {
					this.polist = [{
						id: 0,
						pointid: value.pointRealId,
						name: '编辑测点信息',
						color: '#303133',
						fontSize: '16'
					}, {
						id: 2,
						pointid: value.pointRealId,
						name: '绑定传感器',
						color: '#303133',
						fontSize: '16'
					}]
				}
			},
		},
		//下拉加载
		onReachBottom() {
			if (this.count < this.pageSize) {
				this.loadStatus = "nomore";
			} else {
				setTimeout(() => {
					this.loadStatus = "loading";
					this.pageSize += 10;
					this.getPointList();
				}, 1000);
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageSize = 10;
			this.getPointList();
			uni.stopPullDownRefresh();
		}
	};
</script>
<style lang="scss" scoped>
	//渐变背景
	.gross {
		height: 40%;
		background-image: linear-gradient(to bottom, rgb(41, 121, 255), rgb(246, 246, 246));
	}

	//设备信息
	.eqinfo {
		width: 90%;
		margin: auto;
		height: 60%;
		padding: 2%;
		border-radius: 15px;
		background-color: #fff;
		position: relative;
	}

	//设备名称
	.eqname {
		width: 90%;
		word-wrap: break-word;
		font-size: 16px;
		font-weight: bold;
		margin: 3% auto;
		text-align: center;
		color: #2979ff;
	}

	//设备轮播图
	.eqpng {
		display: inline-block;
		width: 44%;
		margin: 0% 3%;
	}

	//报警信息
	.bjinfo {
		display: inline-block;
		width: 50%;
		position: absolute;
	}

	//轮播图-右侧标题
	.swipertitle {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 5%;
	}

	//标题下数据
	.swiperneiron {
		display: flex;
		flex-direction: column;
	}

	//每一行数据
	.swiperview {
		flex-grow: 1;
		text-align: center;
		margin: 3% 0%;
	}

	//name和单位
	.text {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
		color: #303133;
		flex-grow: 1;
		text-align: center;
	}

	//数字
	.number {
		width: 25%;
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		flex-grow: 1;
		text-align: center;
	}

	//数据字体颜色和伪类
	.hei {
		color: #303133;
	}

	.one {
		//一级报警
		color: #ebbb53;
	}

	.two {
		//二级报警
		color: #FC8452;
	}

	.three {
		//三级报警
		color: #EE6666;
	}

	.ydone {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #ebbb53;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydtwo {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #FC8452;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	.ydthree {
		&::before {
			content: '';
			display: inline-block;
			width: 7px;
			height: 7px;
			background: #EE6666;
			border-radius: 50%;
			margin-right: 6px;
			margin-bottom: 2px;
		}
	}

	//设备当前状态
	.eqzt {
		width: 90%;
		margin: 3% auto;
		padding: 2% 5%;
		background-color: #ffffff;
		border: 1px solid #ebeef5;
		border-radius: 15px;
		display: flex;
	}

	//list内容
	.dqzthead {
		width: 100%;
		word-wrap: break-word;
	}

	//当前状态
	.dapzttitle {
		font-size: 15px;
		line-height: 22px;
		color: #303133;
	}

	//最后检测时间
	.dapzttext {
		margin-top: 5rpx;
		font-size: 12px;
		line-height: 18px;
		color: #303133;
	}

	//报警次数阈值
	.editcishu {
		font-size: 15px;
		width: 90%;
		margin: 3% auto;
		padding: 2% 5%;
		background-color: #ffffff;
		border: 1px solid #ebeef5;
		border-radius: 10px;
		word-wrap: break-word;
		display: flex;
	}

	//设备列表
	.pointli {
		background-color: #fff;
		border-radius: 15px;
		overflow: hidden;
		margin: 2% auto;
		border: 1px solid #ebeef5;
		width: 90%;
	}

	.slotbo {
		width: 100%;
		word-wrap: break-word;
	}

	.slottitle {
		font-size: 15px;
		line-height: 22px;
	}

	.slottext {
		margin-top: 5rpx;
		font-size: 12px;
		line-height: 18px;
	}

	.xia {
		padding: 1% 3%;
		flex-wrap: wrap;
	}

	.xiaview {
		text-align: center;
		font-size: 12px;
		display: inline-block;
		border: 1px dashed #b0b2b5;
		flex-grow: 1;
		width: 33%;
		padding: 3% 0%;
	}

	.xianame {
		padding-bottom: 5%;
	}

	.zhengchang {
		color: #262c36;
	}

	.yvjing {
		color: #ebbb53;
	}

	.baojing {
		color: #FC8452;
	}

	.gaobao {
		color: #EE6666;
	}

	.zanwushujv {
		font-size: 16px;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-weight: bold;
		color: #2979ff;
	}

	.biaoti {
		width: 100%;
		padding: 2% 0%;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border: 1px dashed #b0b2b5;
	}

	.xiaindex {
		margin-bottom: 5%;
	}

	.xiaindexlist {
		display: flex;
		flex-wrap: wrap;
	}
</style>